<template>
  <div class="menu-wrapper" :style="{ top: top + 'px', left: left + 'px' }">
    <el-dropdown ref="dropdown1" trigger="contextmenu" style="margin-right: 30px">
      <span> </span>
      <template #dropdown>
        <el-dropdown-menu v-if="menuOptions">
          <el-dropdown-item v-for="item in menuOptions" :key="item.label" @click="item.handle">{{
            item.label
          }}</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script setup lang="ts">
import { defineProps, ref, watch, onMounted, PropType } from 'vue'
import { MenuOptionInterface } from './ContextMenu.dto'

const props = defineProps({
  top: Number,
  left: Number,
  show: {
    default: false,
    type: Boolean
  },
  menuOptions: {
    type: Object as PropType<Array<MenuOptionInterface>>
  }
})

const dropdown1 = ref()

watch(
  () => props.left,
  () => {
    dropdown1.value.handleClose()

    setTimeout(dropdown1.value.handleOpen)
  }
)

onMounted(() => {
  dropdown1.value.handleOpen()
})
</script>
<style>
.menu-wrapper {
  position: fixed;
  z-index: 1;
}
</style>
